<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-sacle=1.0">
    <title>CSS 布局及动画</title>
    <link rel="stylesheet" href="./css/main.css">
    <style>
        .none {
            display: none;
        }

        #left {
            border: 1px #CCC solid;
            width: 100px;
            height: 100px;
            float: left;
        }

        #middle {
            border: 1px #CCC solid;
            width: 184px;
            height: 100px;
            margin-left: 5px;
        }

        #right {
            border: 1px #CCC solid;
            width: 100px;
            height: 100px;
            margin-left: 5px;
            float: left;
            margin-left: 5px;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both;
        }

        .back-top {
            width: 50px;
            height: 50px;
            background-color: aquamarine;
            border: 1px #aaa solid;
            text-align: center;
            line-height: 50px;
            border-radius: 5px;
            position: fixed;
            right: 10px;
            bottom: 50px;
        }

        .f-l {
            float: left;
            width: 32%;
            margin-right: 1em;
        }


        #position-sec {
            overflow: hidden;
        }

        .relative {
            position: relative;
            top: 50px;
        }


        .absolute {
            position: absolute;
            top: 50px;
            z-index: -1;
        }

        .bg {
            background-color: brown;
        }
    </style>
</head>

<body>
    <header>
        <h1>CSS 布局及动画</h1>
    </header>
    <main>
        <section>
            <h2>display</h2>
            <p class="none">元素如何显示，可以通过diaplay属性进行指定。每一个元素都有一个默认的display属性，但这个属性值可以修改。</p>
        </section>
        <section>
            <div id="head">头部</div>
            <div id="main">
                <div class="clearfix">
                    <div id="left">左侧</div>
                    <div id="middle">中间</div>
                    <div id="right">右侧</div>
                </div>

                <p style="clear:both">
                    使用了浮动属性的元素将会影响到其后的内容。使用了浮动属性的元素将会影响到其后的内容。使用了浮动属性的元素将会影响到其后的内容。使用了浮动属性的元素将会影响到其后的内容。
                </p>
            </div>
        </section>
        <section id="position-sec">
            <h2>position</h2>
            <div class="back-top">
                <a href="#">up</a>
            </div>
            <div class="f-l">
                <h2>正常信息流</h2>
                <p>孩子，你真是快活啊，一早晨坐在泥土里，耍着折下来的小树枝。</p>
                <p>我微笑着看你在那里耍着那根折下来的小树枝。</p>
                <p class="bg">我正忙着算账，一小时一小时在那里加叠数字。</p>
                <p>也许你在看我，想到：“这种好没趣的游戏，竟把你的一早晨的好时间浪费掉了！"</p>
                <p>孩子，我忘了聚精会神玩耍树枝与泥饼的方法了。</p>
            </div>
            <div class="f-l">
                <h2>相对定位</h2>
                <p>孩子，你真是快活啊，一早晨坐在泥土里，耍着折下来的小树枝。</p>
                <p>我微笑着看你在那里耍着那根折下来的小树枝。</p>
                <p class="bg relative">我正忙着算账，一小时一小时在那里加叠数字。</p>
                <p>也许你在看我，想到：“这种好没趣的游戏，竟把你的一早晨的好时间浪费掉了！"</p>
                <p>孩子，我忘了聚精会神玩耍树枝与泥饼的方法了。</p>
                <code>.relative { position: relative; top:150px;}</code>
            </div>
            <div class="f-l" style="position:relative">
                <h2>绝对定位</h2>
                <p>孩子，你真是快活啊，一早晨坐在泥土里，耍着折下来的小树枝。</p>
                <p>我微笑着看你在那里耍着那根折下来的小树枝。</p>
                <p class="bg absolute">我正忙着算账，一小时一小时在那里加叠数字。</p>
                <p>也许你在看我，想到：“这种好没趣的游戏，竟把你的一早晨的好时间浪费掉了！"</p>
                <p>孩子，我忘了聚精会神玩耍树枝与泥饼的方法了。</p>
                <code>.absolute {
                position: absolute;
                top:150px;}
                
            </code>
            </div>

            </div>
        </section>
        <section>
            <h2>居中</h2>
            <div class="center-table">
                <p>I'm vertically centered multiple lines of text in a CSS-created table layout.</p>
            </div>
            <style>
                .center-table {
                    display: table;
                    height: 250px;
                    background: white;
                    width: 140px;
                    margin: 20px;
                }

                .center-table p {
                    display: table-cell;
                    margin: 0;
                    background: black;
                    color: cornsilk;
                    padding: 20px;
                    border: 10px solid white;
                    vertical-align: middle
                }
            </style>
            <style>
                em-container {
                    background: cornsilk;
                    height: 300px;
                    margin: 20px;
                    width: 300px;
                    position: relative;
                    resize: vertical;
                    overflow: auto;

                }
            </style>
            <main class="em-container">
                <div class="em-middle">
                    我是一个块级元素，高度未知。我在父元素中垂直居中。
                </div>
            </main>
        </section>
        <section>
            <style>
                .box {
                    background: #2db34a;
                    transition-property: all;
                    transition-duration: 1s;
                    transition-timing-function: linear;
                    transition-delay: 3s;
                    height: 300px;
                    width: 300px;
                    margin: 1em auto;
                    text-align: center;
                    line-height: 300px;
                    border: 4px #ccc double;
                    transition: all 0.3 ease-in-out 1s;
                }

                .box:hover {
                    background: #ff7b29;
                    border-radius: 300px;
                }
            </style>
            <div class=".box">
                动画
            </div>
        </section>
        <section>
            <h1 class="animated fadeIn ">XCVXVXCVXVXV</h1>
        </section>
    </main>
    <footer style="clear:both">
        <p><span>《网页设计与制作》 </span><span>学号P171212387</span> <span>指导教师：yangzh</span></p>
    </footer>
</body>

</html>